<template>
  <div class="demo-split">
    <Split v-model="split2" mode="vertical">
      <div slot="top" class="demo-split-pane" style="margin: 20px">

        <!--<i-button @click="show">Click me!</i-button>-->
        <!--<Modal v-model="visible" title="Welcome" :z-index="zIndex">Welcome to iView</Modal>-->
        <Form ref="formInline" :model="formInline" inline label-position="left">
          <FormItem>
            <Select v-model="selectValue" style="width:200px">
              <Option v-for="item in selectList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>



          <FormItem v-if="selectValue==2">
            <Input type="text" v-model="formInline.applicantUnit" placeholder="">
              <span slot="prepend">申请人单位</span>
            </Input>
          </FormItem>
          <FormItem v-if="selectValue==1">
            <Input type="text" v-model="formInline.carApplyUnit" placeholder="">
              <span slot="prepend">申请单位</span>
            </Input>
          </FormItem>

          <FormItem>
            <Input type="text" v-model="formInline.buildVersion" placeholder="">
              <span slot="prepend">导入版本号</span>
            </Input>
          </FormItem>



          <!--  车、路类型  carType -->
          <FormItem v-if="selectValue==1">
            <Select v-model="selectCarType" style="width:200px" placeholder="类型">
              <Option v-for="item in selectCarTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>



          <FormItem>
            <Button type="primary" icon="ios-search" @click="handleSubmit(formInline,selectValue)">查询
            </Button>
            <Button  @click="clearForm()">重置
            </Button>
          </FormItem>
          <br>
          <Button type="success" style="float:right;" @click="exportExcelCount(formInline,selectValue)">导出</Button>
        </Form>
      </div>
      <div slot="bottom" class="demo-split-pane">
        <Table border :columns="columns1" :data="data1" v-if="selectValue==1" height="400" ></Table>
        <Table border :columns="columns2" :data="data2" v-if="selectValue==2" height="400" ></Table>
        <Page ref="page" show-total show-sizer size="small" :current="pageData.current" :total="pageData.total"
              :page-size="pageData.pageSize" :page-size-opts="pageData.pageSizeOpts"
              @on-change="changePage" @on-page-size-change="changeSize"></Page>
      </div>
    </Split>
  </div>
</template>

<script>
  import {baseUrl} from "../../api/api";
  import {downloadExcel} from "../../api/api";

    export default {
        name: "Statistics",
      data() {
        return {
          // zIndex:2000,
          // visible: false,
          pageData:{
            current: 1,
            total: 0,
            pageSize: 10,
            pageSizeOpts:[10,20,50]
          },
          selectCarType: '',
          selectCarTypeList: [
            {
              label: '全部',
              value: ''
            }, {
              label: '养护生产-路网',
              value: 1
            }, {
              label: '生产生活-路网',
              value: 2
            }, {
              label: '养护生产-区间',
              value: 3
            }, {
              label: '生产生活-区间',
              value: 4
            },
          ],
          selectValue: 1,
          selectList: [
            {
              label: '公务车',
              value: 1
            }, {
              label: '职工车',
              value: 2
            }
          ],
          formInline: {
            selectCarType: this.selectCarType
          },
          split2: 0.4,
          columns1: [
            {
              title: '申请单位',
              key: 'carApplyUnit'
            },
            {
              title: '业务类型',
              key: 'carBussType'
            },{
              title: '车类型',
              key: 'carType',
              render: (h, params)=>{

                let msg = "";
                if (params.row.carType == 1) {
                  msg = "养护生产（路网）"
                }else if (params.row.carType == 2) {
                  msg = "生产生活（路网）"
                }else if (params.row.carType == 3) {
                  msg = "养护生产（区间）"
                }else if (params.row.carType == 4) {
                  msg = "生产生活（区间）"
                }

                return h('div', {
                  props: {},
                }, msg);
              }
            },{
              title: '导入版本号',
              key: 'buildVersion'
            },{
              title: '条数',
              key: 'count'
            },

          ],
          columns2: [
            {
              title: '申请单位',
              key: 'applicantUnit'
            },
            {
              title: '业务类型',
              key: 'carBussType',

            },{
              title: '导入版本号',
              key: 'buildVersion'
            },{
              title: '条数',
              key: 'count'
            },
          ],
          data1: [],
          data2: [],
        }
      },
      methods:{

        clearForm() {
          this.formInline={};

        },
        exportExcelCount(formInline,selectValue) {
          let data = {};
          let page = {
            current: this.pageData.current,
            size: this.pageData.pageSize
          }
          formInline.carType=this.selectCarType
          data.page = page;
          data.data= formInline

          if (selectValue === 1) {//公务车
            this.$axios({
              method: 'post',
              url: baseUrl + '/productFreeApply/exportExcelCount',
              responseType: "arraybuffer",
              data: data,
              traditional: true,
            }).then(res => {
              downloadExcel(res.data);
            });
          }else if (selectValue === 2) {
            this.$axios({
              method: 'post',
              url: baseUrl + '/employFreeApply/exportExcelCount',
              responseType: "arraybuffer",
              data: data,
              traditional: true,
            }).then(res => {
              downloadExcel(res.data);
            });
          }

        },
        changeSize(size) {
          if (this.pageData.total != 0) {
            this.$refs["page"].currentPage = Math.ceil((this.pageData.current * this.pageData.pageSize) / size)
            this.pageData.pageSize = size;
          }
        },
        changePage(index) {
          this.pageData.current=index
          this.handleSubmit(this.formInline, this.selectValue)
        },
        handleSubmit(formInline, selectValue) {
          let data = {};
          let page = {
            current: this.pageData.current,
            size: this.pageData.pageSize
          }
          formInline.carType=this.selectCarType
          data.page = page;
          data.data= formInline
          if (selectValue === 1) {
            this.$axios({
              method: 'post',
              url: baseUrl+'/productFreeApply/Statistics',
              data: data
            })
              .then(res=>{
                this.pageData.total=res.data.data.total
                this.data1=res.data.data.records
              })

          }else if (selectValue === 2) {
            this.$axios({
              method: 'post',
              url: baseUrl + '/employFreeApply/Statistics',
              data: data
            })
              .then(res => {
                this.pageData.total=res.data.data.total
                this.data2=res.data.data.records
              });
          }
        },
        exportExcel(formInline,selectValue) {
        }
      }
    }
</script>

<style scoped>
  .demo-split {
    height: 40em;
    border: 1px solid #dcdee2;
    text-align: center;
    vertical-align: middle;
  }

  .demo-split-pane {
    padding: 10px;
  }
</style>
